<template>
  <el-drawer
    :title="title"
    direction="rtl"
    :visible.sync="visible"
    size="54%"
    append-to-body
    :wrapperClosable="false"
  >
    <el-card class="box-card" style="width: 96%; margin-left: 20px">
      <el-form ref="form" :model="form" style="width: 80%">
        <el-form-item label="姓名">
          <el-input
            readonly
            :value="form.createBy"
            placeholder="请输入本周进展"
          />
        </el-form-item>
        <el-form-item label="本周进展" prop="weeklyContent">
          <el-input
            readonly
            v-model="form.weeklyContent"
            type="textarea"
            placeholder="请输入本周进展"
            :rows="5"
          />
        </el-form-item>
        <el-divider>下周计划</el-divider>
        <el-form-item label="周一" prop="day1">
          <el-input
            v-model="form.day1"
            readonly
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="周二" prop="day2">
          <el-input
            v-model="form.day2"
            readonly
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="周三" prop="day3">
          <el-input
            v-model="form.day3"
            readonly
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="周四" prop="day4">
          <el-input
            v-model="form.day4"
            readonly
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="周五" prop="day5">
          <el-input
            v-model="form.day5"
            readonly
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="周六" prop="day6">
          <el-input
            v-model="form.day6"
            readonly
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="周日" prop="day7">
          <el-input
            v-model="form.day7"
            readonly
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="分享人列表" prop="shareList">
          <el-select
            v-model="form.shareList"
            disabled
            filterable
            clearable
            multiple
            placeholder="请选择分享人列表"
            style="width: 100%"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card
      class="box-card"
      style="width: 96%; margin-left: 20px; margin-top: 20px"
    >
      <div slot="header">
        <span>阅读记录</span>
      </div>
      <el-timeline>
        <el-timeline-item
          placement="top"
          v-for="user in userReadList"
          :key="user.userId"
          
        >
          <div class="timeline-box">
            <el-avatar shape="square" :size="45" :src="user.avatar" @error="errorHandler">{{user.userName}}</el-avatar>
            <div class="timeline-font-box">
                <div class="timeline-font-user-box">{{ user.userName }} <span class="timeline-font-time-box">{{user.readTime}}</span></div> 
                <div style="color: red; font-weight: 700;" v-if="user.status === '0'">未读</div>
                <div style="color: #66bc5c; font-weight: 700;" v-else>已读 </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </el-drawer>
</template>

<script>
import { getWeekly } from "@/api/erp/weekly";
import { getErpWeeklyRecordList } from "@/api/erp/weeklyRecord";
export default {
  name: "weeklyDetailsDrawer",
  data() {
    return {
      title: "周报详情",
      visible: false,
      form: {},
      userReadList: [],
    };
  },
  props: {
    userList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    errorHandler() {
      return true;
    },
    open(weeklyId) {
      this.visible = true;
      this.getWeekly(weeklyId);
      this.getErpWeeklyRecordList(weeklyId);
    },
    getErpWeeklyRecordList(weeklyId) {
      getErpWeeklyRecordList({ weeklyId: weeklyId }).then((res) => {
        this.userReadList = res.data;
      });
    },
    getWeekly(weeklyId) {
      getWeekly(weeklyId).then((res) => {
        this.form = res.data;
        this.form.shareList = res.data.shareList ? res.data.shareList.split(",") : null;
      });
    },
  },
};
</script>

<style scoped>
.timeline-box {
    display: flex;
    margin-left: 20px;
}

.timeline-font-box {
    display: grid; 
    margin-left: 10px;
}

.timeline-font-user-box {
    font-size: initial; 
    font-weight: 800;
}

.timeline-font-time-box {
    font-size: small; 
    color: rgba(31, 56, 88, 0.6); 
    font-weight: 600; 
    margin-left: 5px;
}
</style>